// 主应用组件

import React, { useState, useEffect } from 'react';
import { Toaster } from 'react-hot-toast';
import { AppProvider, useApp } from './contexts/AppContext';
import WordInput from './components/WordInput';
import InteractiveLearning from './components/InteractiveLearning';
import ProgressTracker from './components/ProgressTracker';
import Settings from './components/Settings';
import Navigation from './components/Navigation';
import { motion, AnimatePresence } from 'framer-motion';

type ViewType = 'input' | 'learning' | 'progress' | 'settings';

// 主应用内容组件
function AppContent() {
  const { state } = useApp();
  const [currentView, setCurrentView] = useState<ViewType>('input');
  const [isLoading, setIsLoading] = useState(true);

  // 监听 AppContext 状态变化
  useEffect(() => {
    if (state.learningMode === 'learning' && state.currentScene) {
      setCurrentView('learning');
    } else if (state.learningMode === 'input') {
      setCurrentView('input');
    }
  }, [state.learningMode, state.currentScene]);

  // 初始化加载
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1500);
    
    return () => clearTimeout(timer);
  }, []);

  console.log('AppContent rendering, isLoading:', isLoading, 'currentView:', currentView);

  // 加载动画
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-green-50 flex items-center justify-center">
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          className="text-center space-y-6"
        >
          <motion.div
            animate={{ rotate: 360 }}
            transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
            className="w-16 h-16 mx-auto rounded-full border-4 border-purple-200 border-t-purple-600"
          />
          <div>
            <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent mb-2">
              SceneLingo
            </h1>
            <p className="text-gray-600">正在初始化场景化英语学习...</p>
          </div>
        </motion.div>
      </div>
    );
  }

  // 渲染当前视图
  const renderCurrentView = () => {
    console.log('Rendering view:', currentView);
    try {
      switch (currentView) {
        case 'input':
          return <WordInput />;
        case 'learning':
          return <InteractiveLearning />;
        case 'progress':
          return <ProgressTracker />;
        case 'settings':
          return <Settings />;
        default:
          return <WordInput />;
      }
    } catch (error) {
      console.error('Error rendering component:', error);
      return (
        <div className="p-8 text-center bg-red-50">
          <h2 className="text-xl font-bold text-red-600 mb-4">组件加载失败</h2>
          <p className="text-gray-600 mb-4">{String(error)}</p>
          <button 
            onClick={() => window.location.reload()}
            className="px-4 py-2 bg-red-600 text-white rounded-lg"
          >
            重新加载
          </button>
        </div>
      );
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-green-50">
      {/* 主内容区域 */}
      <main className="pb-20">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentView}
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -20 }}
            transition={{ duration: 0.3 }}
            className="min-h-screen"
          >
            {renderCurrentView()}
          </motion.div>
        </AnimatePresence>
      </main>

      {/* 底部导航 */}
      <Navigation 
        currentView={currentView} 
        onViewChange={setCurrentView}
      />

      {/* Toast 通知 */}
      <Toaster
        position="top-center"
        toastOptions={{
          duration: 3000,
          style: {
            background: '#fff',
            color: '#374151',
            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
            borderRadius: '12px',
            border: '1px solid #e5e7eb'
          },
          success: {
            iconTheme: {
              primary: '#10b981',
              secondary: '#fff'
            }
          },
          error: {
            iconTheme: {
              primary: '#ef4444',
              secondary: '#fff'
            }
          }
        }}
      />
    </div>
  );
}

// 主应用组件包装器
function App() {
  console.log('App component rendering');
  
  return (
    <React.StrictMode>
      <AppProvider>
        <AppContent />
      </AppProvider>
    </React.StrictMode>
  );
}

export default App;